<template>
  <div class="index">
    <div class="my">
      <img v-if="yhlist.id || yhlist.yhid" src="../../assets/images/st.png" alt="">
      <img @click="tologin()" v-else src="../../assets/images/st.png" alt="">
      <div class="name" v-if="yhlist.id || yhlist.yhid">{{yhlist.yhm || yhlist.nickname}}</div>
      <div @click="tologin()" class="name" v-else>登录/注册</div>

      <div class="collect" @click="tosc()">
        <div class="mine" >
          <i class="i1"></i>
          <span>我的收藏</span>
        </div>
        <i class="i2"></i>
      </div>
      <div class="btn" @click="tobtn()" v-if="yhlist.id || yhlist.yhid">
         退出登录
      </div>
    </div>
    
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="gift-o">商户</van-tabbar-item>
      <van-tabbar-item icon="shop-o">商品</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
import { getlogout, postSaveVisit } from "@/api/api.js";
export default {
  name: '',
  data() {
    return {
      value: '',
      active: 3,
      yhlist:{},
      user: JSON.parse(localStorage.getItem('userlogin')),
    };
  },
  created() {
    this.yhlist = localStorage.getItem('userlogin')?JSON.parse(localStorage.getItem('userlogin')):{}
    console.log(this.yhlist,'00')
    this.postSaveVisit()
  },
  mounted() {

  },
  methods: {
    async postSaveVisit(){  //浏览监听
      let res = await postSaveVisit({
        yhid: this.user.id || this.user.yhid,
        lx: 2
      })
    },
    async tobtn(){
      localStorage.removeItem('userlogin');
      // let res = await getlogout()
      //  this.$router.push({
      //     path: "/index"
      //   })
      window.location.href = 'https://jsc.wzfeiyi.cn/fygo'

    },
    tologin(){
       this.$router.push({
          path: "/index"
        })
    },
    onChange(index) {
      console.log(index);
      if(index == 0){
        this.$router.push({
          path: "/home"
        })
      } else if(index == 1){
        this.$router.push({
          path: "/merchant"
        })
      } else if(index == 2){
        this.$router.push({
          path: "/goods"
        })
      }
    },
    tosc(){
      if(localStorage.getItem('userlogin')){
        this.$router.push({
          path: "/sc"
        })
      }else{
        this.$router.push({
          path: "/index"
        })
      }
       
    },
  },
}
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 100%;
  background: url('../../assets/images/bj.png') no-repeat;
  background-size: 100% 100%;

  .my {
    height: calc(100% - 8.875rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #F7FAFF 100%);
    position: relative;
    top: 8.875rem;
    border-radius: 1.25rem 1.25rem 0px 0px;
    .btn{
      width: 70%;
      height: 3rem;
      background-color: #6CAAFE;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 11rem auto 0;
      border-radius: 2rem;
      font-size: .875rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      
    }
    img {
      width: 5rem;
      height: 5rem;
      position: absolute;
      // top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .name {
      font-size: .9375rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 1.3125rem;
      padding-top: 3.75rem;
      text-align: center;
    }

    .collect {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 1.5625rem;
      border-bottom: 0.0625rem dashed #BDBDBD;
      padding: 1.875rem 0 .9375rem;

      .mine {
        display: flex;
        align-items: center;

        i {
          margin-right: .3125rem;
        }
      }

      .i1 {
        width: 1.375rem;
        height: 1.375rem;
        background: url('../../assets/images/my_sc.png') no-repeat;
        background-size: 100% 100%;
        display: block;
      }

      .i2 {
        width: .4375rem;
        height: .75rem;
        background: url('../../assets/images/arrows_2.png') no-repeat;
        background-size: 100% 100%;
        display: block;
      }
    }
  }

  ::v-deep .van-tabbar-item {
    .van-icon-home-o:before {
      content: ''
    }

    .van-icon-friends-o:before {
      content: ''
    }
    .van-icon-gift-o:before {
      content: ''
    }
    .van-icon-shop-o:before {
      content: ''
    }

    .van-icon-home-o {
      width: 1.5rem;
      height: 1.375rem;
      background: url('../../assets/images/home.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-friends-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/my.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }
    .van-icon-gift-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/2_1.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }
    .van-icon-shop-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/1_2.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }
  }

  ::v-deep .van-tabbar-item--active {
    .van-icon-home-o:before {
      content: ''
    }

    .van-icon-home-o {
      width: 1.5rem;
      height: 1.375rem;
      background: url('../../assets/images/on_home.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-friends-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/on_my.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }
    .van-icon-gift-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/2_2.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }
    .van-icon-shop-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../../assets/images/1_1.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-tabbar-item__text {
      font-size: .625rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #000000;
    }
  }

}
</style>